<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>大白家商城</title>
		<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
		<style>
			html {
				background: #fff;
			}

			label {
				width: 7.5rem;
			}

			.ptb10 {
				padding: 1rem 0;
				border-bottom: 0.05rem #e6e6e6 solid;
			}

			input {
				color: #cbcbcb;
			}

			input::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #ccc;
			}

			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #ccc;
			}

			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #ccc;
			}

			input:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #ccc;
			}

			.button1 {
				position: relative;
				background: #d1ab31;
				padding: 10px 20px;
				border: 0px;
				border-radius: 10px;
				color: #fff;
				font-weight: bold;
				font-size: 1rem;
				width: 100%;
				margin-top: 1rem;
			}

			.button1:active {
				transform: translate(1px, 1px);
			}

			#title {
				text-align: center;
				color: #b5b5b5;
				margin-top: 1rem;
			}

			.list_css {
				padding: 5px;
			}
			.list_css ul li{
				margin-top: 8px;
				border:1px solid #eee8d5;
				border-radius: 5px;
				padding: 5px;
			}

			.list_css p {
				display: inline-block;
				width: auto;
				line-height: 30px;
				font-size: 14px;
				font-weight: 400;

			}
		</style>
	</head>
	<body>
		<div id="app" style="font-size: 0.8rem;padding: 0 0.5rem;background: #fff;height: 100vh;">
			<div class="flex ai_center ptb10">
				<label for="input1">仓库名称:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input1" v-model="warename"
						value="" />
				</div>
			</div>
			<div class="flex ai_center ptb10">
				<label for="input2">产品名称:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input2" v-model="proname"
						value="" />
				</div>
			</div>
			<div class="flex ai_center ptb10">
				<label for="input3">仓管员:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input3" v-model="wareuser"
						value="" />
				</div>
			</div>
			<div class="flex ai_center ptb10">
				<label for="input4">代理人姓名:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input4" v-model="dainame"
						value="" />
				</div>
			</div>
			<div class="flex ai_center ptb10">
				<label for="input5">代理人级别:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input5" v-model="daijibie"
						value="" />
				</div>
			</div>
			<div class="flex ai_center ptb10">
				<label for="input6">代理人地址:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input6" v-model="daiaddress"
						value="" />
				</div>
			</div>
			<div class="flex ai_center ptb10">
				<label for="input7">代理人联系方式:</label>
				<div class="flex1">
					<input class="" style="width: 100%;" type="text" placeholder="请输入" id="input7" v-model="daimobile"
						value="" />
				</div>
			</div>
			<button @click="submit" class="button1">
				提交
			</button>
			<div id="title">
				基本信息是系统所需，请正确填写！
			</div>
			<div class="list_css">
				<ul v-for="(item,index) in list" :key="index">
					<li>
						<p v-cloak>仓库名称:{{item.warename}}</p>
						<p v-cloak>产品名称:{{item.proname}}</p>
						<p v-cloak>仓管员:{{item.wareuser}}</p>
						<p v-cloak>代理人姓名:{{item.dainame}}</p>
						<p v-cloak>代理人级别:{{item.daijibie}}</p>
						<p v-cloak>代理人地址:{{item.daiaddress}}</p>
						<p v-cloak>联系方式:{{item.daimobile}}</p>
						<p v-cloak>出库时间:{{item.create_time}}</p>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="__TEM_STATIC__/js/public/jquery-3.4.1.min.js"></script>
	<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					The_lock: true,
					warename: '',
					proname: '',
					wareuser: '',
					dainame: '',
					daijibie: '',
					daiaddress: '',
					daimobile: '',
					list: {$list | json_encode | raw},
				}
			},
			mounted() {
				console.log(this.list)
			},
			methods: {
				submit() {
					if (this.warename == "") {
						vant.Toast('仓库名称不能为空');
					} else if (this.proname == "") {
						vant.Toast('产品名称不能为空');
					} else if (this.wareuser == "") {
						vant.Toast('仓库员不能为空');
					} else if (this.dainame == "") {
						vant.Toast('代理人姓名不能为空');
					} else if (this.daijibie == "") {
						vant.Toast('代理人级别不能为空');
					} else if (this.daiaddress == "") {
						vant.Toast('代理人地址不能为空');
					} else if (this.daimobile == "") {
						vant.Toast('代理人联系方式不能为空');
					} else {
						if (this.The_lock == true) {
							let url = window.location.href
							$.post(url, {
								warename: this.warename,
								proname: this.proname,
								wareuser: this.wareuser,
								dainame: this.dainame,
								daijibie: this.daijibie,
								daiaddress: this.daiaddress,
								daimobile: this.daimobile,
								suid: this.list.suid
							}, function(res) {
								console.log(res);
								if (res.code == 1) {
									vant.Notify({
										type: 'success',
										message: '提交成功'
									});
									setTimeout(() => {
										location.reload();
									}, 3000)
								}
							});
							this.The_lock = false
							setTimeout(() => {
								this.The_lock = true
							}, 3000)
						} else {
							vant.Notify({
								type: 'danger',
								message: '请不要连续点击'
							});
						}
					}
				}
			}
		});
		(function() {
			change();

			function change() {
				/* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕375px位基准此时的字体大小为20px(375*20px),
				那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/375 */
				document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 375 + 'px';
			}
			/* 监听窗口大小发生改变时 */
			window.addEventListener('resize', change, false);
		})();
	</script>
</html>
